<template>
  <div>
    <ul>
      <li @click="tuijian">
        <div>
          <img src="@/assets/img/1.svg" alt="" />
          <span>每日推荐</span>
        </div>
      </li>
      <li @click="$router.push({ path: '/gendan' })">
        <div>
          <img src="@/assets/img/2.svg" alt="" />
          <span>歌单</span>
        </div>
      </li>
      <li @click="$router.push({ path: '/paihang' })">
        <div>
          <img src="@/assets/img/3.svg" alt="" />
          <span>排行版</span>
        </div>
      </li>
      <li @click="$router.push({ path: '/shipin' })">
        <div>
          <img src="@/assets/img/4.svg" alt="" />
          <span>MV</span>
        </div>
      </li>
      <li @click="$router.push({ path: '/newborn' })">
        <div>
          <img src="@/assets/img/5.svg" alt="" />
          <span>新碟上架</span>
        </div>
      </li>
    </ul>
    <van-popup
      v-model="showTuijian"
      position="bottom"
      :style="{ height: '30%' }"
    >
      <van-cell
        v-for="(item, index) in tuijianList"
        :key="index"
        :title="item.name"
        icon="play-circle-o"
        @click="$router.push({ path: '/gendanXiang', query: { id: item.id } })"
      />
    </van-popup>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { likemusic, gedanmusic } from '../home'
export default {
  name: 'tuijian',
  data () {
    return {
      tuijianList: [], //推荐歌单
      showTuijian: false
    }
  },
  methods: {
    async tuijian () {
      this.showTuijian = true
      let res = await likemusic()
      console.log(res)
      this.tuijianList = res.data.result
    },
    noClick () {
      Toast.fail('没做')
    }
  }
}
</script>

<style scoped>
ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin: 15px 0;
}
ul li {
  flex: 20%;
  font-size: 12px;
  margin-bottom: 10px;
}
ul li div {
  display: flex;
  flex-direction: column;
  align-items: center;
}
ul li div img {
  height: 34px;
  width: 34px;
  margin-bottom: 10px;
}
</style>
